import { initExecute } from '../../../../../common/utils/index.js';
// 多分页列表，且它们的filter共用同一个头部区域
const TableTabs = (hook, { SuperTable, Tabs, TabPane }) => {
	return {
		isJiess: true,
		name: 'TableTabs',
		setup({ tables, headParam, defaultKey = 1, ...other }) {
			const { $ref } = hook.$m;
			const execFunc = initExecute.call(this);
			const headNode = $ref();
			const mapping = {};
			this.onMounted(() => {
				headNode.value = mapping[defaultKey].node;
			});
			this.add({ $slot: 'header' },
				// -------------------
				{ children: { $proxy: headNode }, ...headParam },
				// -------------------
				{ $slot: 'middle' }, {
					is: Tabs,
					// element中需要定义为字符串
					modelValue: defaultKey + '',
					onTabChange: e => {
						const { node } = mapping[e] || {};
						if (node) headNode.value = node;
					},
					children: tables.map(({ filter, tabTitle, tabParam, ...tabOther }, i) => {
						const name = `${i+1}`;
						return {
							name,
							is: TabPane,
							label: tabTitle,
							...tabParam,
							children: {
								is: SuperTable,
								filter(midder) {
									const node = execFunc(filter, [midder]);
									mapping[name] = { midder, node };
								},
								...tabOther
							}
						};
					}),
					...other
				}, { $slot: 'footer' }
			);

		}
	}
};
export default TableTabs;